 <template>
   <van-loading v-if="loading" size="20" color="#1989fa" />
   <van-icon  
    v-else
    :color="articleAttitude===1 ? '#3296fa':'#777'" 
    :name="articleAttitude===1 ? 'good-job':'good-job-o'"  
    @click="onArticleLike" 
  />
</template>

<script>
import {addLike,deleteLike} from '@/api/article'
  export default {
    data() {
      return {
        loading: false  // 节流阀
      }
    },
    props: {
      // 文章的态度
      articleAttitude:{
        type:Number,
        required:true
      },
      // 接收文章ID
      articleId:{
        type:[Number,String,Object],
        required:true
      }
    },
    methods: {
      async onArticleLike() {
           // 没登录不可以收藏
        if(!this.$store.state.user){
          this.$toast('请登录')
          return this.$router.push('/login?redirect='+this.$route.path)
        }
        this.loading = true
        try {
          if(this.articleAttitude===1){
           // 取消点赞
           await deleteLike(this.articleId)
          }else{
            // 要点赞
            await addLike(this.articleId)
          }
          this.$toast.success(this.articleAttitude===1 ? '取消成功':'点赞成功')
          this.$emit('update:article-attitude',this.articleAttitude===1 ? 0:1)
        } catch (error) {
          this.$toast.fail('操作出错')
        }
        this.loading = false
      }
    }
  }
</script>

<style lang="less" scoped>
.van-button--default{
  border:none;
}
</style>